<template>
  <div>
    <tablePage ref="tablePage" :requestFunc="requestFunc">
      <template slot="rows">
        <el-table-column prop="accountName" label="用户名" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="备注" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="roles" label="部门角色">
          <template slot-scope="{ row }">部门成员{{ row.roles | accountRoleTypeTypeByString }}</template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="primary" plain size="mini" @click="handleShowRoleEditorDialog(row)">编辑角色</el-button>
          </template>
        </el-table-column>
      </template>
    </tablePage>

    <roleEditorDialog :visible.sync="roleEditorDialog.visible" :details="currentRow" @success="handleEditSuccess"></roleEditorDialog>
  </div>
</template>

<script>
import tablePage from "@/components/tablePage";
import roleEditorDialog from "@/views/system/components/roleEditorDialog";
import * as userRoleRelationAPI from "@/api/userRoleRelation";
import { accountRoleTypeTypeByString } from "@/utils/filters";

export default {
  name: "role",
  components: { tablePage, roleEditorDialog },
  filters: { accountRoleTypeTypeByString },
  data() {
    return {
      roleEditorDialog: {
        visible: false,
      },
      currentRow: {},
    };
  },

  methods: {
    requestFunc: userRoleRelationAPI.list,
    handleEditSuccess() {
      this.$refs.tablePage.playLoadData();
    },
    handleShowRoleEditorDialog(row) {
      this.currentRow = { ...row };
      this.roleEditorDialog.visible = true;
    },
  },
};
</script>

<style scoped></style>
